<template>
    <div id="nav">
        <div class="header-top">
          <mt-header title="天天拼货团">
          <mt-button slot="left" @click="clickLeft" class="mui-icon mui-icon-search"></mt-button>
          <mt-button slot="right" class="mui-icon mui-icon-chat" @click="clickRight"></mt-button>
          </mt-header>
        </div>
        <div class="header-bottom">
          <ul>
            <li v-for="(item,key) in navlist" :key="key" active-class="active">
                 <router-link :to="item.path" active-class="active">{{item.name}}</router-link>
            </li>
          </ul>
        </div>
    </div>
</template>
<script>
export default {
  props: ["navbar"],
  data() {
    return {
      navlist: [
        { name: "🎉广州货", path: "/home/Guangdong" },
        { name: "杭州货", path: "/home/Hangzhou" },
        { name: "深圳货", path: "/home/Shenzhen" },
        { name: "鞋包配饰", path: "/home/Accessories" }
      ]
    };
  },
  methods: {
    clickLeft() {
      console.log("显示搜索页面");
      this.$router.push({ name: "SearchView" });
    },
    clickRight() {
      console.log("信息");
      this.$router.push({ name: "Messageview" });
    }
  }
};
</script>
<style lang="scss" scoped>
.active {
  color: red;
}
#nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  z-index: 2;
  .header-top {
    width: 100%;
    flex: 5;
    .mint-header {
      height: 63px;
      font-size: 23px;
      background: #c6091b;
    }
  }
  .header-bottom {
    flex: 3;
    width: 100%;
    background: white;
    ul {
      width: 100%;
      height: 37px;
      display: flex;
      flex-direction: row;
      li {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
      }
    }
  }
}
</style>


